<template>
  <div class="h-right">
    <div class="p-info" @click="showModal">
      <img :src="userInfo.avatarUrl" alt="" class="img" />
      <span class="username">{{ userInfo.nickName }}</span>
      <a-icon type="caret-down" @click.stop="showInfo" class="ico" />
      <span class="open-vip">开通vip</span>
      <a-modal
        title="登录"
        :visible="visible"
        footer=""
        v-if="!$store.state.isLogin"
        @click="showModal"
        @cancel="handlCancle"
      >
        <a-form-model
          :model="formInline"
          @submit="handleSubmit"
          @submit.native.prevent
        >
          <a-form-model-item>
            <a-input v-model="formInline.user" placeholder="Username">
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-input
              v-model="formInline.password"
              type="password"
              placeholder="Password"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-checkbox v-model="checked"> Checkbox </a-checkbox>
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              type="primary"
              html-type="submit"
              style="width: 100%"
              :disabled="formInline.user === '' || formInline.password === ''"
              :loading="loading"
            >
              {{ txt }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <div class="others">
      <a-icon class="ico" type="setting" />
      <a-icon class="ico" type="skin" />
      <a-badge count="33">
        <a-icon class="ico" type="mail" />
      </a-badge>
      <a-icon class="ico left-line" type="minus" />
      <span class="ico"></span>
      <a-icon class="ico" type="close" />
    </div>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "Right",
  props: ["userInfo", "isHide"],
  data() {
    return {
      formInline: {
        user: "",
        password: "",
      },
      visible: false,
      checked: true,
      loading: false,
      txt: "登录",
    };
  },
  methods: {
    // 登录
    handleSubmit(e) {
      this.loading = true;
      this.txt = "登录中";
      const { user, password } = this.formInline;
      axios
        .get("/login/cellphone", {
          params: { phone: user, password: password },
        })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$bus.$emit('getUserList');
            if (this.checked) {
              localStorage.setItem("isLogin", true);
              localStorage.setItem(
                "remPass",
                JSON.stringify({ username: user, password })
              );
              localStorage.setItem('userId', res.account.id)
            }
            // 改变isLogin
            this.$store.commit("changeState", true);
            this.successLogin(res);
            this.$message.success("登录成功");
            this.visible = false;
            this.loading = false;
            this.txt = "登录";
          } else {
            this.$message.error("密码错误");
            localStorage.removeItem("userInfo");
            this.loading = false;
            this.txt = "登录";
          }
        });
    },

    successLogin(res) {
      const profile = res.profile;
      const obj = {};
      obj.avatarUrl = profile.avatarUrl;
      obj.nickName = profile.nickname;
      this.$emit("changeUserInfo", obj);
    },
    handlCancle() {
      this.visible = false;
    },
    showModal() {
      const { username, password } = this.getUserInfo();
      this.formInline = {
        user: username,
        password: password,
      };
      this.visible = true;
    },
    getUserInfo() {
      const info = localStorage.getItem("remPass");
      if (info) {
        return JSON.parse(info);
      }
    },
    showInfo() {
      if (!this.$store.state.isLogin) {
        return;
      }
      this.$emit("changeIsHide", !this.isHide);
    },
  },
  mounted() {
    const info = this.getUserInfo();
    if (info && this.$store.state.isLogin) {
      const { username, password } = info;
      axios
        .get("/login/cellphone", {
          params: { phone: username, password },
        })
        .then((res) => {
          this.successLogin(res);
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.h-right {
  color: #eee;
  display: flex;
  align-items: center;
  .p-info {
    cursor: pointer;
    .img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
    }
    .open-vip {
      margin-left: 0.8rem;
    }
    .username {
      margin: 0 0.5rem;
    }
  }
  .others {
    margin-left: 2rem;
    .ico {
      cursor: pointer;
      margin: 0 1rem;
      font-size: 1.8rem;
    }
    span.ico {
      display: inline-block;
      width: 1.3rem;
      height: 1.3rem;
      border: 1px solid #eee;
      cursor: pointer;
    }
    .ico.left-line {
      padding-left: 1.5rem;
      border-left: 1px solid #eee;
    }
  }
}
</style>